{% extends "layout.html" %}
{% block content %}
    <h1>Find a video</h1>
    <p>Upload or link a song to find a matching video.<br>
    Please only upload <b>audio longer than 5 seconds</b> and <b>shorter than 5 minutes</b>, because otherwise the feature extraction will take too long.</p>
    All uploaded files and files based on them will be deleted after 24 hours.<br>
    The longer the uploaded song is, the time it takes to process it.</p>
    <div class="content-section">
        <form class="form-inline" method="POST" enctype="multipart/form-data">
            <div class="form-group col-12 col-md-3 col-lg-2">
                <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" style="padding-right: 5px" title="Supported file types: .aac, .flac, .mp3, .ogg, .wav, .wma"></i>
                <label class="form-label" for="uploadSongForm">Upload a song:</label>
            </div>
            <div class="col-12 col-md-6 col-lg-8">
                <input type="file" class="form-data" id="uploadSongForm" name="uploadSongForm" style="width: 100%" accept=".aac, .flac, .mp3, .ogg, .wav, .wma">
            </div>
            <div class="col-12 col-md-3 col-lg-2">
                <button type="submit" class="btn btn-md btn-outline-secondary mb-2" id="uploadSongButton" style="width: 100%" disabled>Upload</button>
            </div>
        </form>
        {% if user_upload != '' and error != '' and song_link == '' %}
            <div class="form-inline" id="upload_error_form">
                <div class="col-0 col-md-3 col-lg-2">
                </div>
                <div class="col-12 col-md-6 col-lg-8" style="height: 25px">
                    <p style="color: #cb444b" id="error1">{{error}}</p>
                </div>
            </div>
        {% elif user_upload != '' %}
            <div class="row" id="uploadSongDisplay">
                <audio width="100%" height="100%" controls>
                    <source src="{{'static/uploads/audio/' + user_upload}}"type="audio/mp3">
                    Your browser does not support the audio tag.
                </audio>
                <a class="btn btn-md btn-success mb-2" href="{{ url_for('waiting', data_type='audio', name=encoded) }}" style="width: 100%; margin-top: 10px">Continue</a>
            </div>
        {% endif %}
        <hr>
        <form class="form-inline" method="POST" enctype="multipart/form-data">
            <div class="form-group col-12 col-md-3 col-lg-2">
                <i class="fas fa-info-circle" data-toggle="tooltip" data-placement="top" style="padding-right: 5px" title="Only YouTube songs shorter than 5 minutes"></i>
                <label class="form-label" for="linkSongForm">Link a song:</label>
            </div>
            <div class="col-12 col-md-6 col-lg-8">
                <input type="text" class="form-control mb-2 mr-sm-2" id="linkSongForm" name="linkSongForm" style="width: 100%" value="{{song_link}}">
            </div>
            <div class="col-12 col-md-3 col-lg-2">
                <button type="submit" class="btn btn-md btn-outline-secondary mb-2" id="linkSongButton" style="width: 100%">Upload</button>
            </div>
        </form>
        {% if error != '' and song_link != '' %}
            <div class="form-inline"id="linkSongError">
                <div class="col-0 col-md-3 col-lg-2">
                </div>
                <div class="col-12 col-md-6 col-lg-8" style="height: 25px">
                    <p style="color: #cb444b" id="error">{{error}}</p>
                </div>
            </div>
        {% endif %}
        {% if linked_song != '' %}
            <div class="row"id="linkSongDisplay">
                <audio width="100%" height="100%" controls>
                    <source id="linkedSongSource" src="{{'static/uploads/audio/' + linked_song}}" type="audio/mp3">
                    Your browser does not support the audio tag.
                </audio>
                <a class="btn btn-md btn-success mb-2" href="{{ url_for('waiting', data_type='audio', name=encoded) }}" style="width: 100%; margin-top: 10px">Continue</a>
            </div>
        {% endif %}
    </div>

    <script>$('[data-toggle="tooltip"]').tooltip();</script>
    <script type="text/javascript" src="{{ url_for('static', filename='audio.js') }}"></script>

{% endblock content %}
